<!--
 * @FileDescription 菜单栏
 * @Author 杨宇翔
 * @Date 20220728 14:19:30
 * @LastEditors 杨宇翔
 * @LastEditTime 20220728 14:19:30
-->
<template>
    <div class="header">
        <span>{{ InertialNavigationSettings.Default.Title }}</span>
        <span>{{ InertialNavigationSettings.Default.Status }}</span>
        <span>{{ InertialNavigationComponent.Default.Status.value }}</span>
        <button class="reset" type="button"></button>
        <button class="reset" type="button" @click="InertialNavigationComponent.Default.OnExitAsync()"></button>
    </div>
</template>

<script setup lang="ts">
import InertialNavigationComponent from './InertialNavigationComponent';
import InertialNavigationSettings from './InertialNavigationSettings';
</script>

<style scoped>
.header {
    position: absolute;

    width: 100%;
    height: 6.2rem;

    background-color: #131520E6;

    display: flex;
    align-items: center;
    gap: 2rem;

    padding-left: 2rem;
    padding-right: 2rem;

    border-bottom: 0.1rem solid #36384B;
}

img {
    width: 3.2rem;
    height: 3.2rem;
}

span:first-of-type {
    flex-grow: 1;

    color: #B1B1D4;
    font-size: 2.4rem;
}

span:last-of-type {
    color: #81859C;
    font-size: 2.4rem;
}

button {
    width: 4rem;
    height: 4rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    cursor: pointer;
}

button:first-of-type {
    /* background-image: url('/static/InertialNavigation/icon_settings.png'); */
}

button:last-of-type {
    /* background-image: url('/static/InertialNavigation/icon_exit.png'); */
}
</style>